<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body onclick="fn()">
    111
    <script>

        // 绑定事件的方式
        //    1 行内事件
        //    2 js中  找到相应的对象  事件绑定

        //   第一种事件绑定和第二种事件绑定只会留一个   后面覆盖前面


        //    3 事件监听  addEventListener(type , fn)




        // DOM事件
        //   0级事件   行内事件，onclick    --- 会覆盖
        //   2级事件   事件监听    --- 不会覆盖



        document.body.onclick = function () {
            console.log(777);
        }

        document.body.onclick = function () {
            console.log(888);
        }


        document.body.addEventListener('click', function () {
            console.log(999);
        })

        document.body.addEventListener('click', function () {
            console.log(0);
        })

        function fn() {
            console.log(666);
        }

    </script>

</body>

</html>